<template>
  <div class="top">
    <div class="linear"></div>
    <div class="header">
      <div>
        <van-icon name="down" class="jiantou" size="8.333vw" @click="go"/>
      </div>
      <div class="text">{{text}}</div>
    </div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      default() {
        return ''
      }
    }
  },
  methods: {
    go() {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped>
.linear {
  width: 100%;
  height: 25px;
  background-color: #639df5;
  vertical-align: top;
}
.header {
  display: flex;
  height: 13.056vw;
  align-items: center;
  background-color: #639df5;
}
.jiantou {
  transform: rotate(90deg);
  margin-left: 2.778vw;
  color: white;
}
.text {
  font-size: 5.556vw;
  margin-left: 4.167vw;
  font-weight: 600;
  color: white;
}
.top {
  position: fixed;
  width: 100%;
  z-index: 100;
  top: 0;
  left: 0;
}
</style>
